<div class="modal-container fixed inset-0 w-full min-h-screen z-[100] flex justify-center items-center"
  data-controller="modal"
  data-modal-target="modal"
  data-modal-close-modal-on-backdrop-click-value="<%= close_modal_on_backdrop_click %>"
>
  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-modal-target="backdrop" data-action="click->modal#close" ></div>
  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto bg-white flex z-50 relative shadow-modal <%= overflow_classes %> <%= width_classes %> <%= height_classes %>">
    <div class="flex-1 flex flex-col justify-between">
      <div>
        <% if heading? %>
          <div class="p-6 pb-0 text-2xl tracking-normal font-semibold text-black">
            <%= heading %>
          </div>
        <% end %>
        <% if content? %>
          <div class="p-6 text-base text-gray-500">
            <%= content %>
          </div>
        <% end %>
      </div>
      <% if controls? %>
        <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-100">
          <%= controls %>
        </div>
      <% end %>
    </div>
  </div>
</div>
